<template>
  <div class="sidebar">
    <div class="top">
      <div>
        <ul class="login">
          <li>帮助</li>
          <li><router-link to="/home"  class="back">切换专题</router-link></li>
          <li>登录</li>
        </ul>
      </div>
      <div>
        <ul class="nav">
          <li><router-link to="/backend">后台管理</router-link></li>
          <!--<li><router-link to="">联系我们</router-link></li>-->
          <li><router-link to="/echarts">挖掘分析</router-link></li>
          <li><router-link to="/search">知识检索</router-link></li>
          <li><router-link to="/find">查找古籍</router-link></li>
          <li><router-link to="/index">专题首页</router-link></li>
        </ul>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>

    <footer>
      <img class="bottom" src="../assets/img/bottom.png">
    </footer>

  </div>
</template>

<script>
  export default {
    name: 'index',
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .sidebar{
    height:100%;
    display: flex;
    flex-direction: column;
    background-color: #f0f0f0;
    overflow: auto;
  }
  a{
    color: black;
    text-decoration: none;
  }
  img{
    width:100%;
    height:auto;
  }
  .top{
    background-image: url("../assets/img/index_top.png");
    background-repeat: no-repeat;
    background-size: cover;
    flex: 0 0 auto;
  }
  ul{
    list-style: none;
    overflow: auto;
    width:80%;
    margin: auto;
  }
  .login li{
    float:right;
    color: white;
    margin-right: 50px;
    line-height:50px;
  }
  .nav li{
    float:right;
    color: black;
    padding: 0px 025px;
    line-height:50px;
    -webkit-background-size: inherit;
    background-image: url('../assets/img/bg_fg.png');
    background-repeat: no-repeat;
    background-position: right;
  }
  footer{
    flex: 0 0 auto;
  }
  .content{
    flex: 1 0 auto;
  }
  .bottom{
    margin-bottom: -6px;
  }
  .back{
    color: white !important;
  }
  .nav>li>a:focus, .nav>li>a:hover{
    background-color:transparent;
  }
</style>
